export const addTagSelector = (editor) => {
    const { Components } = editor;
    Components.addType('tagSelector', {
        model: {
            defaults: {
                name: 'tagSelector',
                droppable: false,
                attributes: { class: '' },
                components: [
                    {
                        type: 'div',
                        attributes: { class: 'tagSelector-card-wrapper' },
                        components: [
                            {
                                type: 'div',
                                attributes: { class: 'tag-list' },
                                components: [
                                    { type: 'text', attributes: { class: 'tag active' }, content: '全部' },
                                    { type: 'text', attributes: { class: 'tag' }, content: '市政路桥隧' },
                                    { type: 'text', attributes: { class: 'tag' }, content: '建筑' },
                                    { type: 'text', attributes: { class: 'tag' }, content: '工厂' },
                                    { type: 'text', attributes: { class: 'tag' }, content: '平台定制开发' },
                                    { type: 'text', attributes: { class: 'tag' }, content: 'Bentley/Revit软件二次开发' },
                                ],
                            },
                            {
                                type: 'div',
                                attributes: { class: 'checkbox-container' },
                                components: [
                                    { type: 'div', attributes: { class: 'checkbox-group' }, components: [
                                        { type: 'div', attributes: { class: 'custom-checkbox' }, components: [
                                            { type: 'p', attributes: { class: 'checkbox-text' }, content: '复选框1' },
                                            { type: 'span', attributes: { class: 'checkmark' } },
                                        ]},
                                    ]},
                                    { type: 'div', attributes: { class: 'checkbox-group' }, components: [
                                        { type: 'div', attributes: { class: 'custom-checkbox' }, components: [
                                            { type: 'p', attributes: { class: 'checkbox-text' }, content: '复选框2' },
                                            { type: 'span', attributes: { class: 'checkmark' } },
                                        ]},
                                    ]},
                                    { type: 'div', attributes: { class: 'checkbox-group' }, components: [
                                        { type: 'div', attributes: { class: 'custom-checkbox' }, components: [
                                            { type: 'p', attributes: { class: 'checkbox-text' }, content: '复选框3' },
                                            { type: 'span', attributes: { class: 'checkmark' } },
                                        ]},
                                    ]},
                                ],
                            },
                        ],
                    },
                ],
                script() {
                    const tags = document.getElementsByClassName('tag');
                    const checkboxContainer = document.querySelector('.checkbox-container');

                    const checkboxes = {
                        '全部': ['复选框1', '复选框2', '复选框3'],
                        '市政路桥隧': ['复选框A', '复选框B'],
                        '建筑': ['复选框C', '复选框D'],
                        '工厂': ['复选框E', '复选框F'],
                        '平台定制开发': ['复选框G', '复选框H'],
                        'Bentley/Revit软件二次开发': ['复选框I', '复选框J'],
                    };

                    const renderCheckboxes = (tag) => {
                        const selectedCheckboxes = checkboxes[tag] || [];
                        checkboxContainer.innerHTML = selectedCheckboxes.map(checkbox => `
                            <div class="checkbox-group">
                                <div class="custom-checkbox">
                                <span class="checkmark"></span>
                                    <p class="checkbox-text">${checkbox}</p>
                                </div>
                            </div>
                        `).join('');

                        // 绑定复选框的点击事件
                        const customCheckboxes = checkboxContainer.querySelectorAll('.custom-checkbox');
                        customCheckboxes.forEach(checkbox => {
                            checkbox.addEventListener('click', function() {
                                this.classList.toggle('checked');
                            });
                        });
                    };

                    for (let i = 0; i < tags.length; i++) {
                        tags[i].onclick = function () {
                            for (let j = 0; j < tags.length; j++) {
                                tags[j].classList.remove('active');
                            }
                            tags[i].classList.add('active');
                            renderCheckboxes(tags[i].textContent);
                        };
                    }

                    renderCheckboxes('全部');
                },
                styles: `
                .tagSelector-card-wrapper {
                    border: 1px solid #e0e0e0;
                    border-radius: 8px;
                    width: 80%;
                    margin-left: 10%;
                    margin-right: 10%;
                    padding: 20px;
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
                }
                
                .tag-list {
                    display: flex;
                    justify-content: center;
                    margin-bottom: 20px;
                }
                
                .tag {
                    padding: 10px 20px;
                    cursor: pointer;
                    font-size: 16px;
                    font-weight: bold;
                    color: #666;
                    background-color: #f1f1f1;
                    border-radius: 4px;
                    margin: 0 5px;
                    transition: background-color 0.3s, color 0.3s;
                }
                
                .tag:hover {
                    background-color: #e0e0e0;
                }
                
                .tag.active {
                    background-color: #2196F3;
                    color: white;
                }
                
                
                .checkbox-container {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                }
                
                .checkbox-group {
                    display: flex;
                    align-items: center;
                    position: relative;
                    padding-left: 35px;
                    cursor: pointer;
                    font-size: 16px;
                    user-select: none;
                }
                
                .custom-checkbox {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    font-size: 16px;
                    user-select: none;
                }
                
                .checkmark {
                    display: inline-block;
                    width: 25px;
                    height: 25px;
                    background-color: #f1f1f1;
                    border-radius: 4px;
                    margin-right: 10px;
                    transition: background-color 0.3s, box-shadow 0.3s;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                }
                
                .custom-checkbox:hover .checkmark {
                    background-color: #e0e0e0;
                    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
                }
                
                .custom-checkbox.checked .checkmark {
                    background-color: #2196F3;
                    box-shadow: 0 3px 7px rgba(33, 150, 243, 0.3);
                }
                
                .custom-checkbox.checked .checkmark:after {
                    content: "";
                    position: absolute;
                    display: block;
                    left: 9px;
                    top: 5px;
                    width: 5px;
                    height: 10px;
                    border: solid white;
                    border-width: 0 3px 3px 0;
                    transform: rotate(45deg);
                }
                
                `,
            },
        },
    });

    // 注册 tagSelector 组件
    editor.BlockManager.add('tag-selector', {
        label: '标签选择组件',
        category: '组件类',
        content: { type: 'tagSelector' },
    });
};
